<template>
    <div class="box">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-menu-item index="2">处理中心</el-menu-item>
  <el-menu-item index="3">消息中心</el-menu-item>
  <el-menu-item index="4">订单管理</el-menu-item>
  <el-menu-item index="5">订单管理</el-menu-item>
  <el-menu-item index="6">订单管理</el-menu-item>
  <el-menu-item index="7">订单管理</el-menu-item>
  <el-menu-item index="8">订单管理</el-menu-item>
  <el-menu-item index="9">订单管理</el-menu-item>
</el-menu>
    </div>
</template>
<script>
      export default {
    data() {
      return {
        activeIndex: '',
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style  scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .el-menu.el-menu--horizontal {
    border: none;
    display: flex;
    justify-content: space-around;
    height: 40px;
    background-color: rgb(214, 245, 245);
    color: #000;
}
.el-menu--horizontal>.el-menu-item{
    color: #000;
    height: 40px;
    line-height: 40px;
}
</style>